<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .preview{
        overflow: hidden;
    }
    .preview img{
        display:block;
        width: 200px;
        float: left;
        /* visibility: hidden; */
    }
    </style>
</head>
<body>
    

    <input type='file' name='pic' id="upload"  style="display: none;">
    <button  id="upbtn">上传</button>
    <div class="preview" id="container">
        <img alt="">
    </div>

    

<script>

    var container = document.getElementById('container');

    function preImg(sourceId, targetId) { 

        var upload = document.getElementById(sourceId)
        var files = upload.files;

        for(var i = 0; i < files.length;i++){
            var url = window.URL.createObjectURL(files[i]); 
 
            var img = document.createElement('img');
            img.src = url;
            container.appendChild(img);
        }
        
    }


    document.getElementById('upbtn').onclick = function(){
        trigger(document.getElementById('upload'));
    }

    document.getElementById('upload').onchange = function(){
        preImg("upload")
    }



function trigger(ele){
    if(document.all) {
        ele.click();
    }else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);　
        ele.dispatchEvent(e);
        }   
}
</script>
</body>
</html>